<template>
  <div class="">
    <el-scrollbar>
      <Card :data="cardList"></Card>
    </el-scrollbar>
    <BasicCard style="margin-top: 20px">
      <BasicVxeTable v-bind="gridOptions"> </BasicVxeTable>
    </BasicCard>
  </div>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'
  import Card from './card.vue'
  import {
    getQuYuSheZhi,
    postQuYuSheZhi,
    putQuYuSheZhi,
    deleteQuYuSheZhi,
    getQuYuTongJiBaoBiao,
    postHuoQuPeiZhi
  } from '@/api/shuJuBaoBiao'

  const { t } = useI18n()
  const cardList = ref<any>([])

  const columns: BasicGridColumnProps[] = [
    {
      title: '区域',
      field: 'areaName',
      minWidth: 110
    },
    {
      title: '班组',
      field: 'teamSet',
      width: 200
    },
    {
      title: '生产效率(%)',
      field: 'efcRun',
      minWidth: 130,
      formatter: 'formatFixedNumber'
    },
    {
      title: '理论产量(r/min)',
      field: 'theoreticalYarnWeight',
      minWidth: 130,
      formatter: ({ cellValue }) => {
        return cellValue.toFixed(1)
      }
    }
  ]

  const gridOptions = reactive<BasicGridProps>({
    extraConfig: {
      title: '',
      isCustom: false,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `shujubaobiao-banzuleijibaobiao`, // id用于缓存,务必配置
    maxHeight: 500,
    loading: true,
    showFooter: true,
    columns,
    toolbarConfig: {}, // 工具栏
    exportConfig: {
      filename: t('custom.班产日报表-早班')
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '合计'
          } else if (columnIndex === 3) {
            let count = 0
            data.forEach((item) => {
              count += item.theoreticalYarnWeight
            })
            return count.toFixed(1)
          } else {
            return '--'
          }
        })
      ]
    }
  })

  const yueArr = ref<any>([])
  const monthValue = ref(dayjs().format('YYYY-MM'))
  const time1 = ref()
  const time2 = ref()
  const getInfo = () => {
    postHuoQuPeiZhi({
      searchKeys: ['月报周期设置']
    }).then((res: any) => {
      let items = res
      items.forEach((value) => {
        if (value.key == '月报周期设置') {
          yueArr.value = value.value.split(',')
          if (
            parseInt(dayjs().format('DD')) > parseInt(yueArr.value[3]) &&
            parseInt(dayjs().format('DD')) < 32
          ) {
            monthValue.value = dayjs().add(1, 'month').format('YYYY-MM')
          } else {
            monthValue.value = dayjs().format('YYYY-MM')
          }
          time1.value =
            dayjs(monthValue.value).subtract(1, 'month').format('YYMM') + yueArr.value[1]
          time2.value = dayjs(monthValue.value).format('YYMM') + yueArr.value[3]
          gridOptions.extraConfig.title =
            ' 区域累计月报（上月' + yueArr.value[1] + '-当月' + yueArr.value[3] + '日）'
        }
      })
      getList()
    })
  }

  const getList = () => {
    getQuYuTongJiBaoBiao({
      TsIdStart: time1.value + '01',
      TsIdEnd: time2.value + '99'
    })
      .then((res: any) => {
        gridOptions.loading = false
        const result: any = []
        res.byAreaDetail.forEach((value) => {
          if (Array.isArray(value.byAreaDetails) == true) {
            value.byAreaDetails.forEach((value1) => {
              result.push({
                areaName: value.areaName,
                ...value1
              })
            })
          }
        })
        result.sort((a, b) => {
          return a.areaName.trimStart().substr(0, 1) - b.areaName.trimStart().substr(0, 1)
        })
        gridOptions.data = result

        cardList.value = res.byAreaStatistic
      })
      .catch(() => {
        gridOptions.loading = false
      })
  }

  onMounted(() => {
    getInfo()
  })
</script>
